<template>
    <el-table :data="state.week_data" height="700" 
    :default-sort="state.sort"
    @sort-change="sortChange"
    @cell-click="cellClick"
    :cell-class-name="tableCellClassName"
    style="width: 100%">
        <el-table-column prop="date" label="日期" sortable width="230" />
        <el-table-column prop="close" label="价格"/>
        <el-table-column prop="gb15w" label="gb15w"/>
        <el-table-column prop="gb20w" label="gb20w"/>
        <el-table-column prop="gb30w" label="gb30w"/>
        <el-table-column prop="gb60w" label="gb60w"/>
        <el-table-column prop="weekPct" label="周涨跌" sortable/>
        <el-table-column prop="lp" label="分位点" sortable/>
        <el-table-column prop="disPct" label="disPct" sortable/>
        <el-table-column prop="duration" label="duration" sortable/>
    </el-table>
</template>

<script>
// 个股周数据详情页
import { reactive, watch } from 'vue';
import { weekStockSearch } from '@/stores/week'
import { storeToRefs } from 'pinia';
import { useRoute } from 'vue-router'
import { getLpClassName } from '@/utils/help';
import { getGB30WStaData } from '@/service/gbSta';

export default {

    setup() {

        const base = "weekStock30WSta"
        const sortPropKey = base + "SortProp"
        const sortOrderKey = base + "SortOrder"

        const stockSearchStore = weekStockSearch()
        let { input } = storeToRefs(stockSearchStore)

        // 网址传参
        const {query: query} = useRoute()
        if(query.stock) {
            input.value = query.stock
        }

        const state = reactive({
            weekPctSelected:   "",
            raw_data: [],
            week_data: [],
            sort: { 
                prop: sessionStorage.getItem(sortPropKey) || 'date' , 
                order: sessionStorage.getItem(sortOrderKey) || 'descending' 
            }
        })


        // 只监听pinia中某一个值的变化
        watch(() => input.value, (newValue, oldValue) => {
            loadData()
        })

        const loadData = () => {
            getGB30WStaData(input.value).then(res => {
                state.raw_data = res.data
                state.week_data = res.data
            })
        }

        loadData()

        const sortChange = (column, prop, order) => {
            sessionStorage.setItem(sortPropKey, column.prop)
            sessionStorage.setItem(sortOrderKey, column.order)
        }

        const tableCellClassName = ({row, column, rowIndex, columnIndex}) => {
            var columnProperty = column.property

            if (columnProperty == "lp") {
                return getLpClassName(row[columnProperty])
            }

            if (columnProperty == "duration") {
                if ([1,2].includes(row[columnProperty])) {
                    return 'd300up-cell'
                }
                return ""
            }

            if (columnProperty == "close") {
                return ""
            }
            
            if (["gb15w","gb20w","gb60w"].includes(columnProperty)) {
                if (row[columnProperty] > row["close"]) {
                    return "lt0-cell"
                }
                return ""
            }

            if (row['disPct'] < 0) {
                return 'd300down-cell'
            }
            return ''
        }

        const cellClick = (row, column, cell, event) => {
            var columnProperty = column.property
            if (columnProperty == 'weekPct') {
                if (state.weekPctSelected != "") {
                    state.weekPctSelected = ""
                    state.week_data = state.raw_data
                } else {
                    if (row[columnProperty] >=0) {
                        state.weekPctSelected = "up"
                        state.week_data = state.raw_data.filter(item => item.weekPct >=0)
                    } else {
                        state.weekPctSelected = "down"
                        state.week_data = state.raw_data.filter(item => item.weekPct < 0)
                    }
                }
            }
        }

        return {state, tableCellClassName, sortChange , cellClick}
    }
}
</script>